<template>
	<view class="box">
		<view class="margin"></view>
		<view class="person_data">
			<view class="p_ul">
				<view class="address p_list">
					<view class="address_box">
						<view class="tip1 tip">
							泉州经贸学院店
						</view>
						<view class="tip2 tip">
							距离76m
						</view>
						<view class="tip3 tip">
							4栋101
						</view>
					</view>
				</view>
				
				<view class="xian"></view>
				<view class="p_list p_phone">
					<view class="p1 phone">
						预留电话
					</view>
					<view class="p2 phone">
						<text>17772795647</text>
					</view>
					<view class="p3 phone">
						<text class="update_phone">
							修改电话
						</text>
					</view>
				</view>
				
				<view class="xian"></view>
				<view class="p_list p_phone">
					<view class="phone">
						取餐时间
					</view>
					<view class="phone">
						
					</view>
					<view class="phone eat_time">
					    <view class="eat_tip_box">
					    	<text>立即取餐</text>
					    	<van-icon name="arrow" color="#b0b0b0"/>
					    </view>
					</view>
				</view>
				
				<view class="xian"></view>
				<view class="p_list p_eat_box">
					<radio-group name="" class="p_eat">
						<label>
							<radio value="" name="p1" checked/><text>门店就餐</text>
						</label>
						<view class="padding"></view>
						<label>
							<radio value="" name="p2"/><text>打包外带</text>
						</label>
					</radio-group>
				</view>
			</view>
		</view>
		
		<view class="margin"></view>
		<view class="goods">
			<view :class="ulstate ? 'g_ul':'g_ul1'">
				<view class="g_li1" v-for="(val,index) in shoppingCarData" v-if="orderstate">
					<view class="li1_tip1">
						<view class="li1_img">
							<image :src="val.images[1].url" mode=""></image>
						</view>
						
						<view class="g_tip1">
							<view class="g_name1">
								{{val.name}}
							</view>
							<view class="g_num1">
								x{{val.goodsNum}}
							</view>
						</view>
						
						<view class="g_price1">
							<text>￥{{val.price}}</text>
						</view>
					</view>
					<view class="li1_tip1 coupon_li">
						<view class="coupon_box">
							<view class="coupon1">
								<text class="tip1">
									券
								</text>
								<text class="tip2">
									可用优惠券
								</text>
							</view>
							<view class="coupon2">
								<view class="tip3">
									暂无可用优惠券
								</view>
							</view>
						</view>
						
						<view class="xian"></view>
						<view class="price">
							<text>小计 ￥ {{val.price}}</text>
						</view>
					</view>
				</view>
				
				<view class="g_li" v-for="(val,index) in shoppingCarData" :key="val.id" v-if="!orderstate">
					<view class="img_box">
						<image :src="val.images[1].url" mode=""></image>
					</view>
					
					<view class="g_tip">
						<view class="g_name">
							{{val.name}}
						</view>
						<view class="g_num">
							x{{val.goodsNum}}
						</view>
					</view>
					
					<view class="g_price">
						<text>￥{{val.price}}</text>
					</view>
				</view>
				
			</view>
			<view class="look_more" v-if="!orderstate" @tap="lookMore">
				<text>查看更多</text>
			</view>
		</view>
		
		<view class="submit_order1">
			
		</view>
		
		<view class="submit_order">
			<view class="left order">
				<text class="sum">合计: </text>
				<text class="symbol">￥</text>
				<text class="sum_price">{{shoppingSumPrice}}</text>
			</view>
			<view class="right order">
				<button type="default">提交支付</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				orderstate: true,
				ulstate: true
			}
		},
		onShow() {
			if(this.shoppingCarData.length>2){
				this.orderstate = false
				this.ulstate = false
			}else{
				this.orderstate = true
				this.ulstate = true
			}
		},
		mounted() {
			console.log(this.shoppingCarData)
		},
		methods: {
			lookMore(){
				console.log(111111111111)
				this.ulstate = !this.ulstate
			}
		},
		computed: {
			...mapState(['shoppingCarData','shoppingSumPrice']),
		}
	}
</script>

<style scoped>
	.box{
		width: 100%;
		height: 100%;
		background-color: #f7f7f7;
		overflow: scroll;
	}
	.margin{
		width: 100%;
		height: 15rpx;
	}
	.person_data{
		width: 95%;
		height: 450rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	.goods{
		width: 95%;
		height: auto;
		background-color: #a5f3ff;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	.p_ul{
		width: 95%;
		height: 100%;
		margin: 0 auto;
	}
	.xian{
		width: 100%;
		height: 1rpx;
		background-color: #f7f7f7;
	}
	
	.p_list{
		width: 100%;
		height: 20%;
	}
	.address{
		width: 100%;
		height: 40%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.address_box{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.address .tip{
		margin-top: 10rpx;
	}
	.address .tip1{
		font-size: 1rem;
		font-weight: 700;
		margin-top: 20rpx;
	}
	.address .tip2{
		font-size: 0.85rem;
		color: #b0b0b0;
	}
	.address .tip3{
		font-size: 0.85rem;
	}
	.p_phone{
		display: flex;
		align-items: center;
	}
	.p_phone .phone{
		flex: 1;
		margin-left: 1rpx;
	}
	.p_phone .p2{
		font-size: 0.9rem;
		color: #1f1f1f;
	}
	.p_phone .p2,.p_phone .p3{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.p_phone .update_phone{
		position: absolute;
		right: 0;
	}
	.p_phone .p3 text{
		width: 150rpx;
		line-height: 40rpx;
		text-align: center;
		display: block;
		border: 1rpx solid #007860;
		color: #007860;
		border-radius: 8rpx;
		font-size: 0.8rem;
	}
	.eat_time{
		flex: 0.5;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.eat_time .eat_tip_box{
		position: absolute;
		right: 0;
	}
	.eat_time text{
		color: #035f40;
		font-size: 0.9rem;
	}
	.phone:nth-child(1){
		font-size: 0.9rem;
		
	}
	.p_eat{
		height: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.padding{
		width: 1rpx;
		height: 90rpx;
		background-color: #f7f7f7;
		margin: 0 50rpx;
	}
	.goods{
		width: 95%;
		height: auto;
		margin: 0 auto;
		background-color: #FFFFFF;
	}
	.g_ul{
		width: 95%;
		height: auto;
		margin: 0 auto;
		
	}
	.g_ul1{
		width: 95%;
	    max-height: 600rpx;
		margin: 0 auto;
		overflow: hidden;
		
	}
	.g_li{
		width: 100%;
		height: 150rpx;
		display: flex;
		padding-top: 15rpx;
		
	}
	.g_li .img_box{
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.g_li .img_box image{
		width: 90%;
		height: 90%;
	}
	.g_li .g_tip{
		width: 70%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.g_li .g_tip .g_name{
		font-size: 0.8rem;
		font-weight: 700;
	}
	.g_li .g_tip .g_num{
		font-size: 0.7rem;
		font-weight: 0;
		color: #007860;
		margin-top: 10rpx;
	}
	.g_price text{
		float: left;
		margin-top: 20rpx;
		color: #007860;
	}
	.look_more{
		width: 100%;
		text-align: center;
		line-height: 75rpx;
	}
	.g_li .goods_price{
		width: 10%;
		height: 100%;
	}
	.submit_order{
		width: 100%;
		height: 125rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 99;
	}
	.submit_order1{
		width: 100%;
		height: 125rpx;
	}
	.submit_order > view{
		width: 50%;
		height: 100%;
		float: left;
		position: relative;
	}
	.submit_order .left{
		display: flex;
		align-items: center;
	}
	.left .sum{
		margin-left: 25rpx;
		font-size: 0.9rem;
		color: #161616;
	}
	.left .symbol{
		font-size: 0.7rem;
		font-weight: 700;
		color: #007860;
	}
	.left .sum_price{
		font-size: 1.2rem;
		font-weight: 700;
		color: #007860;
	}
	.submit_order .right button{
		width: 200rpx;
		line-height: 75rpx;
		background-color: #007860;
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		border-radius: 50rpx;
		color: #FFFFFF;
		font-size: 0.9rem;
	}
	
	
	
</style>
<style scoped>
	.g_li1{
		margin-top: 10rpx;
		padding-top: 15rpx;
		height: 400rpx;
	}
	.g_li1 .li1_tip1{
		width: 100%;
		height: 50%;
		display: flex;
	}
	.g_li1 .li1_img{
		width: 30%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.g_li1 .li1_img image{
		width: 90%;
		height: 90%;
	}
	.g_li1 .g_tip1{
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.g_li1 .g_price1{
		width: 10%;
		height: 100%;
	}
    .g_tip1 .g_name1{
		font-size: 0.9rem;
		font-weight: 700;
	}
	.g_tip1 .g_num1{
		font-size: 0.7rem;
		font-weight: 0;
		color: #007860;
		margin-top: 10rpx;
	}
	.g_price1 text{
		float: left;
		margin-top: 20rpx;
		color: #007860;
	}
	
	.coupon_box{
		width: 100%;
		height: 50%;
		display: flex;
	}
	.coupon_li{
		flex-direction: column;
	}
	.coupon1{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.coupon1 .tip1{
		width: 60rpx;
		line-height: 60rpx;
		text-align: center;
		display: inline-block;
		background-color: #007860;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
	.coupon1 .tip2{
		font-size: 1.1rem;
		margin-left: 15rpx;
	}
	.coupon2{
		width: 50%;
		height: 100%;
	}
	.coupon2 .tip3{
		height: 100%;
		float: right;
		display: flex;
		align-items: center; 
	}
	.coupon_li .price{
		line-height: 70rpx;
		text-align: right;
		font-size: 1.1rem;
		box-sizing: border-box;
		padding-right: 5rpx;
	}
</style>